<template>
	<view class="report_detail_page">
		<u-navbar autoBack fixed placeholder bgColor="#fff">
			<template #left>
				<view class="navBar">
					<u-icon name="arrow-left" color="#000" size="18"></u-icon>
					<text class="nav_title">{{shopName}}数据上报</text>
				</view>
			</template>
		</u-navbar>
		<scroll-view scroll-y class="content" :style="{ height: `calc(100% - ${navBarHeight}px)` }">
			<u-sticky>
				<u-tabs :list="tabList" :scrollable="false" :current="activeTab"
					lineColor="linear-gradient(90deg, #F0B643 0%, rgba(216,216,216,0) 100%);" :lineWidth="45" :lineHeight="4"
					:inactiveStyle="{
            'font-size': '32rpx',
            'font-weight': 500,
            color: '#636363',
           }" :activeStyle="{
            'font-size': '32rpx',
            'font-weight': 500,
            color: '#333',
          }" @click="(item) => changeTab(item.index)">
				</u-tabs>
			</u-sticky>
			<view class="tab_box">
        <u-empty
          v-if="!reportList.length"
          mode="data"
          icon="http://cdn.uviewui.com/uview/empty/data.png"
        >
        </u-empty>
				<view v-else class="report_box" v-for="report in reportList" :key="report.id" @click="reportHandle(report)">
					<view class="left">
						<text>{{report.date}}</text>
						<text>{{report.type === '0' ? '点击填报' : ''}}</text>
					</view>
					<view class="right">
						<u-icon color="#999999" name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {qiyeReportDataList} from "@/api/shop";

  export default {
    onShow() {
      if (this.shopId) {
        this.getReportDataList();
      }
    },
    onLoad(option) {
      this.shopName = option.name
      this.shopId = option.id
      this.activeTab = Number(option.activeTab)
      this.getReportDataList();
    },
		data() {
			return {
				tabList: [
					{
						name: '未上报'
					},
					{
						name: '已上报'
					}
				],
        shopName: '',
        shopId: '',
				activeTab: 0,
				reportList: []
			}
		},
		computed: {
			navBarHeight() {
				const platform = uni.getSystemInfoSync().platform
				const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
				let navHeight = 0
				if (['ios', 'devtools'].includes(platform)) {
					navHeight = 44
				} else {
					navHeight = 48
				}
				return navHeight + statusBarHeight
			},
		},
		methods: {
      async getReportDataList() {
        const { code, data, msg } = await qiyeReportDataList({
          qiYeId: this.shopId,
          type: this.activeTab
        })
        if (code === 200) {
          this.reportList = data.rows
        } else {
          this.$modal.msgError(msg)
        }
      },
			reportHandle(report) {
				const { id } = report;
				uni.navigateTo({
					url: `/pages/settled/reportForm?id=${id}&date=${report.date}`
				})
			},
			changeTab(index) {
				this.activeTab = index
				this.getReportDataList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.report_detail_page {
		width: 100vw;
		height: 100vh;
		background-color: #F3F3F3;

		.navBar {
			display: flex;
			align-items: center;

			.nav_title {
				font-size: 36rpx;
				font-weight: 400;
				color: #000000;
				margin-left: 8rpx;
			}
		}

		.content {
			box-sizing: border-box;

			::v-deep .u-tabs {
				background-color: #fff;
			}

			.tab_box {
				padding: 16rpx;
				box-sizing: border-box;

				.report_box {
					background-color: #fff;
					border-radius: 16rpx;
					padding: 32rpx;
					margin-bottom: 16rpx;

					display: flex;
					align-items: center;
					justify-content: space-between;

					.left {
						flex: 1;
						display: flex;
						align-items: center;
						justify-content: space-between;
						text:nth-child(1) {
							font-size: 36rpx;
							font-weight: 500;
							color: #333333;
						}
						text:nth-child(2) {
							font-size: 28rpx;
							font-weight: 400;
							color: #999999;
						}
					}
					.right {
						margin-left: 20rpx;
					}
				}
			}
		}
	}
</style>
